Deploy React App to S3 and Cloudfront by automating the process using Github Actions

Introduction

Hemanth of Alliance Department here. In this blog, I deployed React App to S3 and CloudFront by automating the process using Github Actions.

S3

Simple and popular AWS Service for storage. Replicates data by default across multiple facilities. It charges per usage. It is deeply integrated with AWS Services. Buckets are logical storage units. Objects are data added to the bucket. S3 has a storage class on object level which can save money by moving less frequently accessed objects to a colder storage class.

CloudFront

AWS CloudFront is a content delivery network (CDN) service that aids in the speedy and dependable distribution of static and dynamic information with high performance, security, and developer friendliness. It distributes your content over a global network of edge sites, or data centers that are close to your users. Using serverless compute features, you can also alter the code that is executed at the AWS CDN edge.

Github Actions

Carrying out software development workflows right in your repository using GitHub Actions, a feature of GitHub. To do any activity, including CI/CD, you can find, create, and distribute actions. It is possible to create a completely unique workflow. Additionally, you may develop, test, and deploy your code with GitHub Actions in any language and on any platform. In addition to matrix builds and any language, GitHub Actions supports Linux, macOS, Windows, ARM, and containers.

Demo

Go to IAM, and click on users Click on add users Enter the user name and click next Click on create user Click on created user Click on create access key in security credentials Click on other and click next Click on Download .csv file Now go back to IAM, click on policies and click on create policy Click on JSON and enter the below policy and click on next Give a policy name and click on create policy Now again go back to above created user and click on permission and click on add permissions Add the above policy created to it (Github actions user will have permissions to deploy code in S3 bucket) Creating Github repository Write down repository name and click on create repository clone the repository, cd into it and create react app Now add the files into the github

git add .

git commit -m "created a new create app"

git push

Now go to settings Enter the access key id and secret access key Now go to actions and click set up a workflow yourself Type down the below code and don't forget to change the s3 folder name click on commit changes type a commit message and click on commit changes Go to actions and click on it checking Cloudfront distribution Now making changes in the code Enter following commands in your terminal

git add .

git commit -m "created a new create app"

git pull --rebase

git push

Checking github actions checking the cloudfront distribution

Conclusion

Hope with this you get an idea of how to deploy React App to S3 and Cloudfront by automating the process using Github Actions. Thank you for seeing the blog till the end.